<template>
  <div class="workcenter-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button :icon="DocumentAdd" plain type="primary" @click="openAdd">
          新增
        </el-button>
        <el-button :icon="Edit" plain type="warning" @click="update">
          修改
        </el-button>
        <el-button :icon="Delete" plain type="danger" @click="deleteWc">
          删除
        </el-button>
        <!-- <el-button :icon="Edit" plain type="warning" @click="toUpdate()">
          停用
        </el-button>
        <el-button :icon="Edit" plain type="primary" @click="toUpdate()">
          启用
        </el-button> -->
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table
      :cell-style="{ padding: '6px' }"
      :data="baseWcs"
      highlight-current-row
      :row-style="{ fontSize: '8px' }"
      @current-change="handleCurrentChange"
    >
      <el-table-column type="index" width="50" />
      <el-table-column
        label="中心编码"
        prop="wcCode"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="中心名称"
        prop="wcName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="所属部门"
        prop="deptName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="备料仓库"
        prop="blWhName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="入库仓库"
        prop="defaultRkWhName"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="使用模具" prop="useMold">
        <template #default="scope">
          <el-icon v-if="scope.row.useMold" color="#0a3784" size="22">
            <Check />
          </el-icon>
          <div v-else></div>
        </template>
      </el-table-column>
      <el-table-column label="序列号管理" prop="useMold">
        <template #default="scope">
          <el-icon v-if="scope.row.useSn" color="#0a3784" size="22">
            <Check />
          </el-icon>
          <div v-else></div>
        </template>
      </el-table-column>
      <el-table-column
        label="创建人"
        prop="createUser"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="创建时间"
        prop="createTime"
        :show-overflow-tooltip="true"
      />
    </el-table>

    <addWcDialog ref="addWcRef" @success-callback="addWcCallback" />
    <updateWc ref="updateWcRef" @success-callback="addWcCallback" />
  </div>
</template>

<script setup>
  import { DocumentAdd, Check, Edit, Delete } from '@element-plus/icons-vue'
  import addWcDialog from './modules/addWc.vue'
  import updateWc from './modules/updateWc.vue'
  import { localStorageConfig } from '@/config/localstorage.config'
  import { getWcListApi } from '@/api/base/wc/index'

  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')

  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  const baseWorkCenterQuery = ref({ pkCorp: pkCorp })

  const baseWcs = ref([])

  const currentWc = ref()

  const addWcRef = ref()
  const updateWcRef = ref()

  const openAdd = () => addWcRef.value.openDialog()

  const addWcCallback = () => getWc()

  const getWc = async () => {
    const load = $baseLoading()
    try {
      const res = await getWcListApi(baseWorkCenterQuery.value)
      if (res.code === 2000) {
        $baseMessage(res.msg, 'success')
        baseWcs.value = res.data
      } else {
        $baseMessage(res.msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  const handleCurrentChange = (row) => (currentWc.value = row)

  const update = () => {
    if (currentWc.value === undefined) {
      $baseMessage('请点击一个中心在修改', 'warning')
      return
    }
    updateWcRef.value.openDialog(currentWc.value)
  }

  const deleteWc = () => {
    $baseMessage('需要流程全部完成才可以开放删除功能', 'warning')
  }

  onMounted(() => getWc())
</script>

<style scoped>
  .clas {
    color: #0a3784;
  }
</style>
